<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue3响应式的原理</title>
</head>
<body>

<script type="text/javascript">
    const user = {
        name:"lee",
        age:20,
        wife:{
            name:'na',
            age:18
        }
    }
    // 把目标对象变为代理对象
    //  第一个参数 ------------> user 目标对象
    // 第二个参数 handler -----> 处理器对象，监视数据及操作
    const proxyUser =  new Proxy(user,{
        get(target,prop) {  // 目标对象 要拿的属性
            console.log("调用了get方法")
            return Reflect.get(target,prop)
        },
        // 修改目标对象的属性值/为目标对象添加新的属性
        set(target,prop,val) {
            console.log("调用了set方法")
            return Reflect.set(target,prop,val)
        },
        deleteProperty(target,prop) {
            console.log("调用了del方法")
            return Reflect.deleteProperty(target,prop)
        }
    })
    proxyUser.name = "woc"
    console.log(proxyUser.name)
    console.log(proxyUser)
    delete proxyUser.name
    proxyUser.wife.name = "nana"

</script>
</body>
</html>